<template>
  <a-card>
    <template #title>
      <span class="text-[16px] font-semibold"> 评阅记录 </span>
    </template>
    <a-row align="middle" justify="space-between">
      <SearchGroup
        :label-option="labelOption"
        @handleSearch="loadData(1)"
        @handleReset="reset"
        :searchOption="filterOption"
        :disabled="!defaultFilterOption.kmdm"
      />
    </a-row>

    <a-table
      class="tablstyle"
      :scroll="{ x: 1450 }"
      bordered
      :loading="loading"
      :pagination="false"
      :dataSource="list"
      :columns="evaluation"
    >
      <template #bodyCell="{ column, record, index, text }">
        <template v-if="column.dataIndex == 'index'">
          {{ (curPage - 1) * pageSize + (index + 1) }}
        </template>
        <template v-if="column.dataIndex == 'operation'">
          <a-button type="link" @click="goDetailPage(record)"> 查看 </a-button>
        </template>
        <template v-if="column.dataIndex == 'tmDf' && record.isYc">
          <span style="color: red"> {{ text }}(异常) </span>
        </template>
      </template>
    </a-table>

    <a-pagination
      class="pagination"
      :show-total="total => `共 ${total} 条`"
      :show-size-changer="false"
      show-quick-jumper
      v-model:current="curPage"
      v-model:pageSize="pageSize"
      :total="total"
      :disabled="!defaultFilterOption.kmdm"
    />
  </a-card>

  <popup-info
    :questions="Data.popupVisibl ? Data.questions : {}"
    v-model:popupVisibl="Data.popupVisibl"
    :kmInfo="SelectItem"
    :listPyjd="
      filterOption?.zpDataFlag == 'true'
        ? 'FORMAL'
        : filterOption?.zpDataFlag == 'false'
        ? 'TEST'
        : SelectItem?.pyjd
    "
  ></popup-info>
</template>

<script setup lang="ts">
import { reactive, ref, watch, onActivated, onMounted } from 'vue'

import { labelOption, evaluation, getDictionaryList } from '/@/views/teacher/home/index'

import popupInfo from '/@/views/teacher/home/components/popupInfo.vue'

const pyZtOptions: any = ref([])

import { getZycPyRecordListQuery } from '/@/api/teacher'
import { useList } from '/@/hooks/web/useList'

const {
  curPage,
  total,
  pageSize,
  list,
  reset,
  loading,
  loadData,
  filterOption,
  defaultFilterOption,
}: any = useList(getZycPyRecordListQuery, {
  immediate: false,
  defaultFilterOption: <any>{
    stLx: 'ZGT', //试题类型(主观/客观)
    currentAccountFlag: true, //当前账号
  },
})

onActivated(() => {
  if (props.SelectItem?.kmdm) {
    loadData()
  }
})

/**
 * 定义数据
 */
const Data = <any>reactive({
  questions: {},
  popupVisibl: false,
})

/**
 * 查看评阅详情
 * */
const goDetailPage = record => {
  Data.questions = record
  Data.popupVisibl = true
}

const props = defineProps({
  SelectItem: {
    type: Object,
    dafault: () => {},
  },
})

watch(
  () => props.SelectItem,
  (val, oval) => {
    if (val?.kmdm && val.pyjd && oval?.pyjd !== val?.pyjd && oval?.kmdm !== val.kmdm) {
      defaultFilterOption.kmdm = val?.kmdm
      defaultFilterOption.zpDataFlag =
        val.pyjd === 'FORMAL' ? 'true' : val.pyjd === 'TEST' ? 'false' : ''
      reset()
    }
  },
  { deep: true }
)

defineExpose({
  loadData,
  filterOption,
})

onMounted(async () => {
  await getDictionaryList('pyListZtCode', pyZtOptions)
})
</script>

<style lang="less" scoped>
.tablstyle {
  margin-bottom: 10px;
}
</style>
